<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理 - 宠物邻里互助平台</title>
    <%-- 引入Font Awesome图标库 --%>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 管理员后台样式 */
        :root {
            --primary: #FFF9C4;
            --primary-dark: #FFECB3;
            --secondary: #FFFDE7;
            --accent: #FFD54F;
            --text: #5D4037;
            --text-light: #8D6E63;
            --success: #81C784;
            --warning: #FFB74D;
            --danger: #E57373;
            --border: rgba(255, 213, 79, 0.3);
        }
        /* 其他样式省略... */
    </style>
</head>
<body>
<!-- 侧边导航 -->
<div class="sidebar">
    <div class="logo">
        <h1><i class="fas fa-paw"></i> <span>宠物邻里互助平台</span></h1>
        <p style="font-size: 13px; color: var(--text-light); margin-top: 5px;">管理后台</p>
    </div>

    <%-- 管理菜单 --%>
    <div class="nav-item">
        <i class="fas fa-file-alt"></i>
        <span><a href="${pageContext.request.contextPath}/application/list">申请管理</a></span>
    </div>

    <div class="nav-item">
        <i class="fas fa-users"></i>
        <span><a href="${pageContext.request.contextPath}/user/list">用户管理</a></span>
    </div>

    <%-- 寄养管理菜单 --%>
    <div class="nav-item active">
        <i class="fas fa-home"></i>
        <span>寄养管理</span>
        <i class="fas fa-chevron-down" style="margin-left: auto;"></i>
    </div>
    <div class="sub-nav active">
        <div class="sub-nav-item">
            <i class="fas fa-circle"></i>
            <span><a href="${pageContext.request.contextPath}/Admin/hostList">寄养家庭管理</a></span>
        </div>
        <div class="sub-nav-item active">
            <i class="fas fa-circle"></i>
            <span><a href="${pageContext.request.contextPath}/Admin/orderList">寄养订单管理</a></span>
        </div>
    </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
    <!-- 顶部操作栏 -->
    <div class="topbar">
        <%-- 搜索框 --%>
        <div class="search-bar">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="搜索...">
        </div>

        <%-- 管理员信息 --%>
        <div class="user-info">
            <i class="fas fa-bell" style="font-size: 18px; margin-right: 20px; color: var(--text-light);"></i>
            <img src="${admin_user.icon}" alt="管理员">
            <span>${admin_user.username}</span>
            <a href="${pageContext.request.contextPath}/user/logout" class="logout-btn">
                <i class="fas fa-sign-out-alt"></i> 退出
            </a>
        </div>
    </div>

    <!-- 订单内容区 -->
    <div class="content">
        <h1 class="section-title"><i class="fas fa-list"></i> 订单管理</h1>

        <div class="data-section">
            <%-- 订单表格 --%>
            <table class="order-table">
                <thead>
                <tr>
                    <th>订单ID</th>
                    <th>请求用户</th>
                    <th>提供用户</th>
                    <th>服务类型</th>
                    <th>开始日期</th>
                    <th>结束日期</th>
                    <th>价格</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <%-- 订单列表循环 --%>
                <c:forEach items="${orders}" var="order">
                    <tr>
                        <td>${order.order_id}</td>
                        <td>${order.requester_id}</td>
                        <td>${order.provider_id}</td>
                        <td>${order.service_type}</td>
                        <td>${order.start_date}</td>
                        <td>${order.end_date}</td>
                        <td>¥${order.price}</td>
                        <td>
                                <%-- 订单状态标签 --%>
                            <span class="status-badge status-${order.status.toLowerCase()}">
                                <c:choose>
                                    <c:when test="${order.status == 'PENDING'}">待确认</c:when>
                                    <c:when test="${order.status == 'CONFIRMED'}">已确认</c:when>
                                    <c:when test="${order.status == 'CANCELLED'}">已取消</c:when>
                                    <c:when test="${order.status == 'COMPLETED'}">已完成</c:when>
                                    <c:otherwise>${order.status}</c:otherwise>
                                </c:choose>
                            </span>
                        </td>
                        <td>
                                <%-- 操作按钮 --%>
                            <a href="/order/detail/${order.order_id}" class="action-btn"><i class="fas fa-eye"></i> 查看</a>
                            <a href="#" class="action-btn"><i class="fas fa-edit"></i> 编辑</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    // 导航菜单交互
    const navItems = document.querySelectorAll('.nav-item');

    navItems.forEach(item => {
        // 点击导航项
        item.addEventListener('click', function() {
            // 移除所有活动项
            navItems.forEach(nav => nav.classList.remove('active'));

            // 设置当前项为活动状态
            this.classList.add('active');

            // 切换子菜单显示
            const subNav = this.nextElementSibling;
            if (subNav && subNav.classList.contains('sub-nav')) {
                subNav.classList.toggle('active');
            }
        });

        // 子菜单项点击
        const subNavItems = item.nextElementSibling?.querySelectorAll('.sub-nav-item');
        if (subNavItems) {
            subNavItems.forEach(subItem => {
                subItem.addEventListener('click', function(e) {
                    e.stopPropagation();
                    subNavItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        }
    });
</script>
</body>
</html>